<template>
	<div class="dashboard">
		<div class="navigation">
			<h4>快捷导航</h4>
			<el-row>
				<el-col :span='6'>
					<div class="nav_block">
						<el-badge :value="1" class="item">
							<div class="inner_nav color_blue">
								<img src="../images/员工管理.svg" alt="" width="30" height="30">
							</div>
						</el-badge>
						<span>员工管理</span>
					</div>
				</el-col>
				<el-col :span='6'>
					<div class="nav_block">
						<el-badge :value="3" class="item">
							<div class="inner_nav color_yellow">
								<img src="../images/通讯录.svg" alt="" width="30" height="30">
							</div>
						</el-badge>
						<span>通讯录</span>
					</div>
				</el-col>
				<el-col :span='6'>
					<div class="nav_block">
						<el-badge :value="0" class="item">
							<div class="inner_nav color_green">
								<img src="../images/考勤.svg" alt="" width="30" height="30">
							</div>
						</el-badge>
						<span>考勤</span>
					</div>
				</el-col>
				<el-col :span='6'>
					<div class="nav_block">
						<el-badge :value="1" class="item">
							<div class="inner_nav color_blue">
								<img src="../images/薪资福利.svg" alt="" width="30" height="30">
							</div>
						</el-badge>
						<span>薪资福利</span>
					</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span='6'>
					<div class="nav_block">
						<el-badge :value="2" class="item">
							<div class="inner_nav color_yellow">
								<img src="../images/审批.svg" alt="" width="30" height="30">
							</div>
						</el-badge>
						<span>审批</span>
					</div>
				</el-col>
				<el-col :span='6'>
					<div class="nav_block">
						<el-badge :value="0" class="item">
							<div class="inner_nav color_green">
								<img src="../images/组织框架.svg" alt="" width="30" height="30">
							</div>
						</el-badge>
						<span>组织框架</span>
					</div>
				</el-col>
				<el-col :span='6'>
					<div class="nav_block">
						<el-badge :value="1" class="item">
							<div class="inner_nav color_red">
								<img src="../images/合同管理.svg" alt="" width="30" height="30">
							</div>
						</el-badge>
						<span>合同管理</span>
					</div>
				</el-col>
				<el-col :span='6'>
					<div class="nav_block">
						<el-badge :value="0" class="item">
							<div class="inner_nav color_red">
								<img src="../images/完成项目.svg" alt="" width="30" height="30">
							</div>
						</el-badge>
						<span>完成项目</span>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class='staff'>
			<el-row type='flex' justify='space-between'>
				<el-col :span="7">
					<div>
						<div class="staff_old radius_5px">
							<div class="block" style="border-bottom: 1px solid #ccc;margin-top: 10px;">
								<i class="el-icon-s-custom"></i>
								<div style="margin-left: 20px;">
									<p>新增员工</p>
									<h4>89</h4>
								</div>
							</div>
							<div class="block" style="margin-bottom: 10px;">
								<i class="el-icon-s-custom"></i>
								<div style="margin-left: 20px;">
									<p>总员工数</p>
									<h4>1234</h4>
								</div>
							</div>
						</div>
						<div class="staff_new radius_5px">
							<div class="block" style="border-bottom: 1px solid #ccc;margin-top: 10px;">
								<i class="el-icon-s-custom"></i>
								<div style="margin-left: 20px;">
									<p>面试人数</p>
									<h4>18</h4>
								</div>
							</div>
							<div class="block" style="margin-bottom: 10px;">
								<i class="el-icon-s-custom"></i>
								<div style="margin-left: 20px;">
									<p>待入职数</p>
									<h4>6</h4>
								</div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="7" class='middle_col'>
					<div class="staff_status radius_5px">
						<h4>员工状况</h4>
						<ve-pie :data="chartData_pie" :settings="chartSettings_pie"></ve-pie>
					</div>
				</el-col>
				<el-col :span="10">
					<div class="costs radius_5px">
						<h4>费用概览</h4>
						<ve-histogram :data="chartData_histogram" :settings="chartSettings_histogram" style='width: 450px;margin: 0 auto;'></ve-histogram>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="project">
			<el-row type='flex' justify='space-between'>
				<el-col :span="17">
					<div class="project_list radius_5px">
						<h4>项目列表</h4>
						<el-table :data="tableData" style="width: 95%;margin: 0 auto;" :header-cell-style="{background:'#eef1f6'}">
							<el-table-column prop="pro_name" label="项目名称">
							</el-table-column>
							<el-table-column prop="date" label="截至时间">
							</el-table-column>
							<el-table-column prop="progress" label="项目进度">
								<template slot-scope="scope">
									<el-progress type="line" :text-inside="true" :stroke-width="15" :percentage="scope.row.progress"></el-progress>
								</template>
							</el-table-column>
							<el-table-column prop="leader" label="负责人">
								<template slot-scope="scope">
									<el-avatar shape="square" size="small" :src="scope.row.leader"></el-avatar>
								</template>
							</el-table-column>
							<el-table-column prop="team" label="团队" width='200'>
								<template slot-scope="scope">
									<div v-for="(url,index) in scope.row.team" :key='index' style="display: inline-block;">
										<el-avatar shape="circle" size="small" :src="url"></el-avatar>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="status" label="状态">
								<template slot-scope='scope'>
									<span :style="{color: colorSelFun(scope.row.status)}">{{ scope.row.status }}</span>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-col>
				<el-col :span="7">
					<div class="sex_ratio radius_5px">
						<h4>男女比例</h4>
						<div class="block" style="border-bottom: 1px solid #ccc;">
							<div style="margin-bottom: 15px;">男</div>
							<el-progress type="circle" :percentage="70" stroke-width='12'></el-progress>
						</div>
						<div class="block">
							<div style="margin-bottom: 15px;">女</div>
							<el-progress type="circle" :percentage="30" color="#EE706D" stroke-width='12'></el-progress>
						</div>
					</div>
				</el-col>
			</el-row>		
		</div>
		<div class="Salary_trend">
			<h4>薪资趋势</h4>
			<el-row type='flex' justify='center'>
				<el-col :span='22'>
					<ve-line :data="chartData_line"></ve-line>
				</el-col>
			</el-row>
		</div>
		<div class="footer"></div>
	</div>
</template>

<script>
	import '../css/dashboard.css';

	export default {
		computed: {},
		methods: {
			colorSelFun: function(text) {
				if (text === 'PENDING') return 'red';
				if (text === 'CLOSED') return 'yellow';
				else if (text === 'ACTIVE') return;
			}
		},
		data() {
			this.chartSettings_pie = {
				dataType: 'percent'
			};
			this.chartSettings_histogram = {
				stack: {
					'Date': ['Month', 'Year']
				}
			}
			return {
				chartData_pie: {
					columns: ['项目', '数量'],
					rows: [{
							'项目': '新增员工',
							'数量': 200
						},
						{
							'项目': '总员工',
							'数量': 700
						},
						{
							'项目': '离职员工',
							'数量': 100
						}
					]
				},
				chartData_histogram: {
					columns: ['季度', 'Month', 'Year'],
					rows: [{
							'季度': 'Q1',
							'Month': 38000,
							'Year': 62000
						},
						{
							'季度': 'Q2',
							'Month': 66000,
							'Year': 34000
						},
						{
							'季度': 'Q3',
							'Month': 61000,
							'Year': 39000
						},
						{
							'季度': 'Q4',
							'Month': 66000,
							'Year': 34000
						}
					]
				},
				tableData: [{
						pro_name: '项目A',
						date: '2018-12-01',
						progress: '70',
						leader: '../images/A.png',
						team: [
							'../images/A.png',
							'../images/B.png',
							'../images/C.png'
						],
						status: 'ACTIVE'
					},
					{
						pro_name: '项目B',
						date: '2018-12-02',
						progress: '30',
						leader: '../images/B.png',
						team: [
							'../images/A.png',
							'../images/B.png',
							'../images/C.png',
							'../images/D.png'
						],
						status: 'CLOSED'
					},
					{
						pro_name: '项目C',
						date: '2018-12-03',
						progress: '70',
						leader: '../images/C.png',
						team: [
							'../images/C.png',
							'../images/B.png',
						],
						status: 'PENDING'
					},
					{
						pro_name: '项目D',
						date: '2018-12-04',
						progress: '40',
						leader: '../images/D.png',
						team: [
							'../images/B.png',
							'../images/C.png',
							'../images/D.png'
						],
						status: 'ACTIVE'
					},
					{
						pro_name: '项目E',
						date: '2018-12-05',
						progress: '60',
						leader: '../images/E.png',
						team: [
							'../images/E.png',
							'../images/B.png',
							'../images/C.png',
							'../images/D.png'
						],
						status: 'ACTIVE'
					},
					{
						pro_name: '项目F',
						date: '2018-12-06',
						progress: '20',
						leader: '../images/A.png',
						team: [
							'../images/A.png',
							'../images/B.png',
							'../images/C.png',
							'../images/E.png',
							'../images/D.png'
						],
						status: 'CLOSED'
					}
				],
				chartData_line: {
					columns: ['月份','上海','北京'],
					          rows: [
					           {'月份': 'Jan','上海': 3.9,'北京': 7},
					           {'月份': 'Feb','上海': 4.2,'北京': 6.9},
					           {'月份': 'Mar','上海': 5.7,'北京': 9.5},
					           {'月份': 'Apr','上海': 8.5,'北京': 14.5},
					           {'月份': 'May','上海': 11.9,'北京': 18.4},
					           {'月份': 'Jun','上海': 15.2,'北京': 21.5},
					           {'月份': 'Jul','上海': 17,'北京': 25.2},
					           {'月份': 'Aug','上海': 16.5,'北京': 26.5},
					           {'月份': 'Sep','上海': 14.4,'北京': 24.3},
					           {'月份': 'Oct','上海': 10.3,'北京': 18.3},
					           {'月份': 'Nov','上海': 6.9,'北京': 13.9},
					           {'月份': 'Dec','上海': 4.8,'北京': 9.6},
					          ]
				}
			}
		}
	}
</script>

<style>
</style>
